<template>
  <div class="student">
      <span>{{ id }}</span>
      <span>{{ name }}</span>
      <span>{{ gender }}</span>
      <span>{{ age }}</span>
  </div>
</template>

<script>
export default {
    name: 'Student',
    props: {
        id: Number,
        name: String ,
        gender: String ,
        age: Number
    }
}
</script>

<style>
.student {
    display: flex ;
    margin: 15px ;
    border: 1px solid blue ;
}

.student>span {
    flex-basis: 200px ;
    text-align: center ;
}
</style>